<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="stylesheets/swiper-3.4.2.min.css" />
		<link rel="stylesheet" href="stylesheets/mobile-index.css" />
		<script type="text/javascript" src="javascripts/jquery.min.js"></script>
		<script type="text/javascript" src="javascripts/swiper-3.4.2.min.js"></script>
	</head>
	<body>
		<div class="contain">
			<!--头部导航-->
			<div class="header">
				<div class="bg1">
					<!--logo-->
					<div class="logo1">
						<img src="mobileimages/logo.png"/ width="100%">
					</div>
					<!--下拉菜单按钮-->
					<a class="menu-con1" onclick="bg2_show()">
						<img src="mobileimages/icon-menu.png" width="100%"/>
					</a>
					<!--文字标题-->
					<div class="bannerTitle">
						<img src="mobileimages/VRMaker.png" height="100%"/>
					</div>
					<div class="bannerIntroduce">
						<img src="mobileimages/bg.png" height="100%"/>
					</div>
					<!--视频播放入口-->
					<div class="videoPlayer">
						<span>
							<img src="mobileimages/icon-PlayButton.png" width="100%"/>
						</span>
					</div>
				</div>
				<div class="bg2">
					<div class="logo2">
						<img src="mobileimages/logo1.png"/ width="100%">
					</div>
					<a class="menu-con2" onclick="bg2_hide()">
						<img src="mobileimages/icon-menu1.png" width="100%"/>
					</a>
					<ul class="menu">
						<li><a href="#product">核心产品</a></li>
						<li><a href="#server">服务与解决方案</a></li>
						<li><a href="#application">应用领域</a></li>
						<li><a href="#case">成功案例</a></li>
						<li><a href="#about">关于我们</a></li>
					</ul>
				</div>
			</div>
			<!--产品展示-->
			<div class="product" id="product">
				<div class="showProduct">
					<p>核心产品</p>
					<div class="swiper-container" id="swiper-container-one">
				        <div class="swiper-wrapper product-list">
				            <div class="swiper-slide">
				            	<img src="mobileimages/business01.png" width="100%"/>
								<div class="product-text">
									<h1>VizReal3D</h1>
									<p>模型、参数、图纸、设计、协同、运维，有效建立全生命周期数字化模型。</p>
									<img src="mobileimages/PC.png"/>
								</div>
				            </div>
				            <div class="swiper-slide">
				            	<img src="mobileimages/business02.png" width="100%"/>
								<div class="product-text">
									<h1>Vis3d - Mobile</h1>
									<p>帮助将您的项目内容一键发布至桌面PC、浏览器和智能移动设备，随时查看。</p>
									<img src="mobileimages/yidong.png"/>
								</div>
				            </div>
				            <div class="swiper-slide">
				            	<img src="mobileimages/business03.png" width="100%"/>
								<div class="product-text">
									<h1>Vis3d - VR</h1>
									<p>在沉浸式环境中,实现您与您的数字化产品的交互与多人协同式设计。</p>
									<img src="mobileimages/VR.png"/>
								</div>
				            </div>
				        </div>
				    </div>
					<div class="swiper-pagination product-tip"></div>
					<b></b>
				</div>
			</div>
			<!--产品服务-->
			<div class="server" id="server">
				<div class="productAndServer">
					<p>服务与解决方案</p>
					<ul class="serverList">
						<li>
							<div class="serverInfo">
								<h4>内容订制服务</h4>
								<div class="serverText">
									<p>专业三维美术师设计</p>
									<p>高效建立逼真的数字化、信息化模型</p>
									<p>为模型制作业务逻辑与控制逻辑</p>
								</div>
							</div>
							<div class="serverImage">
								<img src="mobileimages/neirongdingzhi.png" alt="" width="100%"/>
							</div>
						</li>
						<li>
							<div class="serverInfo">
								<h4>桌面解决方案</h4>
								<div class="serverText">
									<p>基于Vis3d - Viewer平台发布</p>
									<p>全生命周期的数字化、可视化管理</p>
									<p>一键发布内容至PC平台</p>
								</div>
							</div>
							<div class="serverImage">
								<img src="mobileimages/zuomianjiejue.png" alt="" width="100%"/>
							</div>
						</li>
						<li>
							<div class="serverInfo">
								<h4>业务咨询服务</h4>
								<div class="serverText">
									<p>探讨有关BIM、企业信息资料可视化</p>
									<p>可视化移动端管理等方面的业务</p>
									<p>特定业务分析咨询与合作开发</p>
								</div>
							</div>
							<div class="serverImage">
								<img src="mobileimages/yewuzixun.png"/  alt="" width="100%"/>
							</div>
						</li>
						<li>
							<div class="serverInfo">
								<h4>云端解决方案</h4>
								<div class="serverText">
									<p>基于Vis3d - Mobile平台发布</p>
									<p>发布内容至魅客三维云平台系统，</p>
									<p>可实现私有云网内随时随地查看</p>
								</div>
							</div>
							<div class="serverImage">
								<img src="mobileimages/yunduanjiejue.png" alt="" width="100%"/>
							</div>
						</li>
						<li>
							<div class="serverInfo">
								<h4>系统整合服务</h4>
								<div class="serverText">
									<p>提供基于.Net Framework框架下的</p>
									<p>API接口实现与原生程序整合</p>
									<p>提供基于NodeJS技术的接口</p>
								</div>
							</div>
							<div class="serverImage">
								<img src="mobileimages/xitongzhenghe.png" alt="" width="100%"/>
							</div>
						</li>
						<li>
							<div class="serverInfo">
								<h4>沉浸式解决方案</h4>
								<div class="serverText">
									<p>基于Vis3d - VR平台发布</p>
									<p>支持VRPN等协议下的位置追踪</p>
									<p>与动作捕捉</p>
								</div>
							</div>
							<div class="serverImage">
								<img src="mobileimages/chenjingshi.png" alt="" width="100%"/>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!--应用领域-->
			<div class="application" id="application">
				<div class="applicationArea">
					<p>应用领域</p>
					<div class="swiper-container" id="swiper-container-two">
						<div class="swiper-wrapper applicationAreaList">
					            <div class="swiper-slide">
					            	<img src="mobileimages/faps.png" width="100%"/>
									<div class="applicationAreaText">
										<h4>方案评审</h4>
										<p>
											<span>设计阶段的方案验证</span>
											<span>布局、色彩、效果等理念的具象化</span>
											<span>不同设计阶段的切换展示</span>
											<span>三维虚拟漫游</span>
											<span>沉浸式体验，身临其境</span>
										</p>
									</div>
					            </div>
					            <div class="swiper-slide">
					            	<img src="mobileimages/xtsj.png" width="100%"/>
									<div class="applicationAreaText">
										<h4>设计协同</h4>
										<p>
											<span>基于BIM和PDM信息</span>
											<span>导入三维设计成果</span>
											<span>整合异构设计系统数据</span>
											<span>尽早发现设计冲突</span>
											<span>建立信息化、可视化模型</span>
										</p>
									</div>
					            </div>
					            <div class="swiper-slide">
					            	<img src="mobileimages/xtfz.png" width="100%"/>
									<div class="applicationAreaText">
										<h4>系统仿真</h4>
										<p>
											<span>建立数字样机的运动仿真模型</span>
											<span>建立数字样机的生产安装工序模型</span>
											<span>建立生产线上的物料轨迹动画仿真</span>
											<span>建立设备的控制逻辑与工况变化仿真</span>
											<span>建立虚拟工人作业仿真</span>
										</p>
									</div>
					            </div>
					            <div class="swiper-slide">
					            	<img src="mobileimages/swjk.png" width="100%"/>
									<div class="applicationAreaText">
										<h4>数字化监控</h4>
										<p>
											<span>建立虚拟模型与现实设备之间的数据绑定</span>
											<span>建立全生命周期的数字双生系统</span>
											<span>实时监控三维数字化工厂工况</span>
											<span>实时异常实时监测，声光报警提醒用户</span>
											<span>实时进度跟踪，物料到场状态实时反馈</span>
										</p>
									</div>
					            </div>
					            <div class="swiper-slide">
					            	<img src="mobileimages/xtpx.png" width="100%"/>
									<div class="applicationAreaText">
										<h4>系统培训</h4>
										<p>
											<span>建立虚拟数字样机教学模型</span>
											<span>设备安装、拆解等工序逻辑的仿真培训</span>
											<span>设备维护、保养等工序逻辑的仿真培训</span>
											<span>系统运行过程及运行原理的交互式培训</span>
											<span>视频、声音、字幕、动态图等培训旁白</span>
										</p>
									</div>
					            </div>
					        </div>
					    </div>
					<div class="swiper-pagination application-tip"></div>
					<b></b>
				</div>
			</div>
			<!--成功案例-->
			<div class="case" id="case">
				<div class="successCase">
					<p>成功案例</p>
					<div class="swiper-container" id="swiper-container-three">
						<div class="swiper-wrapper caseList">
							<div class="swiper-slide">
								<div class="caseImage">
									<img src="mobileimages/chutianbei.png" width="100%" />
								</div>
								<div class="caseInfo">
									<h4>楚天杯</h4>
									<p>汽车柔性生产线</p>
									<p>
										汽车柔性生产线的工位布局评审
									</p>
									<p>
										实现对汽车柔性生产工艺的虚拟验证
									</p>
									<p>
										缩短生产线的实际上线周期
									</p>
									<div class="casePage">
										<b>1</b>/6
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="caseImage">
									<img src="mobileimages/donghezhiye.png" width="100%" />
								</div>
								<div class="caseInfo">
									<h4>东合置业</h4>
									<p>商业地产销售</p>
									<p>
										沉浸式地自由场景漫游
									</p>
									<p>
										评估商业地产办公楼综合设计,可切换不同时间设计效果
									</p>
									<p>
										模拟办公楼周边真实环境
									</p>
									<div class="casePage">
										<b>2</b>/6
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="caseImage">
									<img src="mobileimages/yanfazhongxin.png" width="100%" />
								</div>
								<div class="caseInfo">
									<h4>研发中心</h4>
									<p>数字化工厂运营平台</p>
									<p>
										模型展示功能：导入revit，SolidWorks设计模型
									</p>
									<p>
										数据参数化展示,允许查看各机器以及厂房各系统的参数
									</p>
									<p>
										通过PLC与现实机器绑定
									</p>
									<div class="casePage">
										<b>3</b>/6
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="caseImage">
									<img src="mobileimages/henanditie.png" width="100%" />
								</div>
								<div class="caseInfo">
									<h4>郑州地铁</h4>
									<p>地铁站导向标识</p>
									<p>
										沉浸式体验地铁站内各处导航标识的三维效果
									</p>
									<p>
										体验虚拟地铁站内预定义路线下的进站、出站过程
									</p>
									<p>
										沉浸式地自由场景漫游，身临其境体验场景
									</p>
									<div class="casePage">
										<b>4</b>/6
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="caseImage">
									<img src="mobileimages/shuinichang.png" width="100%" />
								</div>
								<div class="caseInfo">
									<h4>武汉理工</h4>
									<p>水泥工艺虚拟仿真教学平台</p>
									<p>
										CAVE环境下虚拟水泥厂三维展示和自由漫游
									</p>
									<p>
										水泥工艺全流程展示，全流程了解水泥的整个生产工艺
									</p>
									<p>
										水泥工艺各环节交互展示
									</p>
								</div>
								<div class="casePage">
									<b>5</b>/6
								</div>
							</div>
							<div class="swiper-slide">
								<div class="caseImage">
									<img src="mobileimages/baoma.png" width="100%" />
								</div>
								<div class="caseInfo">
									<h4>沈阳宝马</h4>
									<p>虚拟装修设计</p>
									<p>
										沉浸式体验宝马综合展厅效果
									</p>
									<p>
										高度还原现场真实场景,切换不同场景效果
									</p>
									<p>
										允许参看管道等系统参数
									</p>
									<div class="casePage">
										<b>6</b>/6
									</div>
								</div>
							</div>
						</div>
					</div>
					<b></b>
				</div>
			</div>
			<!--关于我们-->
			<div class="about" id="about">
				<div class="aboutUs">
					<p>关于我们</p>
				</div>
				<ul class="contact">
					<li>
						<h4>工作时间</h4>
						<p>09:00-18:30</p>
					</li>
					<li>
						<h4>联系电话</h4>
						<p>027-62435587</p>
					</li>
					<li>
						<h4>电子邮箱</h4>
						<p>sales@vrmaker.com.cn</p>
					</li>
					<li>
						<h4>公司地址</h4>
						<p>武汉市光谷创业街路73号武汉留学生创业园2226</p>
					</li>
				</ul>
			</div>
			<!--脚页-->
			<div class="footer">
				<p>版权所有©2017 VRmaker（中国） 备案号</p>
			</div>
		</div>
	</body>
	<script>
		$(function(){
//			顶部高度自适应
			$(".header").css("height",$(".header").width()*0.48);
			$(".footer").find("p").css("height",$(".footer").width()*0.13);
			$(".footer").find("p").css("line-height",$(".footer").width()*0.13+"px");
//			定位自适应
			$(".bg2").css("top",-$(".header").width()*0.9);
			$(window).resize(function(){
				$(".header").css("height",$(".header").width()*0.48);
				$(".bg2").css("top",-$(".header").width()*0.9);
				$(".caseInfo").css("height",$(".caseList").height());
			})
		})
		window.onload=function(){
			$(".caseImage").height($(".caseImage").find("img").height())
			$(".caseList").height($(".caseImage").height());
			$(".caseInfo").height($(".caseImage").height());
			$(window).resize(function(){
				$(".caseImage").height($(".caseImage").find("img").height())
				$(".caseList").height($(".caseImage").height());
			})
			
			$(".menu").find("a").click(function(){
		    	$(".bg2").css("top",-$(".bg2").height());
		    })
		}
		
		function bg2_show(){
			$(".bg2").css("top",0)
		}
		function bg2_hide(){
			$(".bg2").css("top",-$(".bg2").height())
		}

	</script>
	<script>
    var swiper = new Swiper('#swiper-container-one', {
        pagination: '.product-tip',
        slidesPerView: 'auto',
        paginationClickable: true,
        spaceBetween: 0
    });
    var swiper = new Swiper('#swiper-container-two', {
        pagination: '.application-tip',
        slidesPerView: 'auto',
        paginationClickable: true,
        spaceBetween: 0
    });
     var swiper = new Swiper('#swiper-container-three', {
        slidesPerView: 'auto',
        paginationClickable: true,
        spaceBetween: 0
    });
    </script>
</html>
